<template>
	<!-- 配送地址 -->
	<u-popup :show="show" @close="handleClose" @open="handleOpen" :round="10" @touchmove.stop.prevent="" closeable>
		<view class="distribution_address">
			<view class="distribution_address_title">
				配送至
			</view>
			<scroll-view scroll-y class="distribution_address_scroll" v-if="dataSouse?.length > 0">
				<view class="distribution_address_item" v-for="item in dataSouse" :key="item?.id"
					@click="handleSelect(item)">
					<image src="http://qianxueapplet.suoeryun.com/addressselection.png"
						class="select_address_card_left_select" v-if="item?.id === selectData?.id"></image>
					<image src="http://qianxueapplet.suoeryun.com/addressnotselected.png"
						class="select_address_card_left_select" v-else></image>
					<view class="distribution_address_item_right">
						<view class="distribution_address_item_right_1">
							<text>{{item?.consignee}}</text>
							<text>{{maskPhoneNumber(item?.phoneNumber)}}</text>
						</view>
						<view class="distribution_address_item_right_1">
							<template
								v-if="item?.location">{{item?.location?.replaceAll(',','')}}</template>{{item?.address}}
						</view>
					</view>
				</view>
			</scroll-view>
			<u-empty v-else text="您还没有收货地址哟～"
				icon="http://qianxueapplet.suoeryun.com/zwshdz.png"></u-empty>
		</view>
		<view class="btm_btm safe_area">
			<view class="btm_btm_row">
				<button class="row_btn" @click="handleAddAddress">添加新地址</button>
			</view>
		</view>
	</u-popup>

</template>

<script setup lang="ts">
	import { onMounted, onUnmounted, ref, toRaw, unref } from 'vue';
	import { qxWxUserDeliveryAddressList, queryFreightByGoodsIdALocationCode } from '@/config/goodStuff.api';
	import { maskPhoneNumber } from '@/util/index';

	const show = ref(false);
	const dataSouse = ref([]);
	const selectData = ref();
	const freightTemplateId = ref();

	onMounted(() => {
		// 添加新地址回调
		uni.$on('updataAddressList', item => {
			const pages = getCurrentPages();
			const currentRoute = pages[pages.length - 1].route;
			if (currentRoute === 'pages/goodStuff/goodDetails') {
				handleSelect(item);
			}
		})
		// 获取数据
		uni.$on('loadDataAddress', item => {
			handleShow(null);
		})
	})

	onUnmounted(() => {
		// 销毁-添加新地址回调
		uni.$off('updataAddressList');
		// 销毁-获取数据
		uni.$off('loadDataAddress');
	})

	/**
	 * 打开选择器
	 */
	async function handleShow(item) {
		if (item) {
			selectData.value = item;
			freightTemplateId.value = item?.freightTemplateId;
		}
		handleOpen();
		const res = await qxWxUserDeliveryAddressList({ pageNo: 1, pageSize: 9999 });
		dataSouse.value = res?.records;
	}

	/**
	 * 弹出层关闭
	 */
	function handleClose() {
		show.value = false;
	}

	/**
	 * 弹出层打开
	 */
	function handleOpen() {
		show.value = true;
	}

	/**
	 * 添加新地址
	 */
	function handleAddAddress() {
		uni.$u.route('/pages/goodStuff/editAddress', { btnText: '保存并使用' });
	}

	/**
	 * 选择地址
	 */
	async function handleSelect(item) {
		selectData.value = toRaw(item);
		const res = await queryFreightByGoodsIdALocationCode({ freightTemplateId: unref(freightTemplateId), locationCode: item?.locationCode?.split(',')[0] });
		handleClose();
		uni.$emit('changeAddress', {
			...toRaw(item),
			templateId: res?.id,//邮费Id
			templateName: res?.templateName,//邮费名称
			freightCharges: res?.freightCharges,//运费金额
		});
	}

	defineExpose({
		handleShow,
		handleClose,
	})
</script>

<style lang="scss" scoped>
	.distribution_address {
		padding: 24rpx;
		margin-bottom: 74rpx;

		.distribution_address_title {
			font-size: 32rpx;
			font-weight: 500;
			padding-bottom: 48rpx;
			text-align: center;
		}

		.distribution_address_scroll {
			height: 50vh;

			.distribution_address_item {
				display: flex;
				align-items: flex-start;
				padding-bottom: 24rpx;
				margin-bottom: 24rpx;
				border-bottom: 1px solid #D8D8D8;

				&:last-child {
					border-bottom: 0;
				}

				&>image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
					margin-top: 4rpx;
				}

				.distribution_address_item_right {
					flex: 1;
					font-size: 28rpx;
					color: #666666;

					.distribution_address_item_right_1 {
						text {
							&:first-child {
								margin-right: 24rpx;
							}
						}

						padding-bottom: 12rpx;
					}

					.distribution_address_item_right_1 {}
				}
			}
		}
	}
</style>